<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .big{font-size:100px;}
        [v-clock]{display:none;}
    </style>
</head>
<body>
    <div class="app">
        <h2>hello {{ title }}</h2>
        <ul>
            <li v-for="(item,idx) in arr" v-bind:key="item.id">
                {{idx}} - {{item.city}}
            </li>
        </ul>
        ------
        <ul>
            <li v-for="team in teams">
                <h3>{{team.title}}</h3>
                <ul>
                    <li v-for="item in team.child">
                        {{item}}
                    </li>
                </ul>
            </li>
        </ul>
        -----
        v-for和v-if不要同时使用，如果非得同时使用，说明数据不严谨
    </div>
</body>
<script src="../vue.global.js"></script>
<script>

    const {createApp} = Vue;

    createApp({
        data(){
            return {
                title:"Vue",
                arr:[{
                    city:"北京",
                    id:"1",
                    show:true
                },{
                    city:"上海",
                    id:"2",
                    show:true
                },{
                    city:"广州",
                    id:"3",
                    show:false
                },{
                    city:"深圳",
                    id:"4",
                    show:false
                },{
                    city:"杭州",
                    id:"5",
                    show:true
                }],
                teams:[{
                    title:"销售部",
                    child:["张三","李四"]
                },{
                    title:"业务部",
                    child:["王二","赵五"]
                }]
            }
        }
    }).mount(".app");
    
</script>
</html>